<template>
  <div id="topDiagram">
    <h1 class="con-right-title">
      移动端顶部头图管理
    </h1>
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button type="warning" plain @click="handleClick('add')">
        添加头图
      </el-button>
      <freshCom @searchList="toSearch"></freshCom>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%" ref="table">
      <el-table-column prop="title" label="标题" min-width="100" align="center">
      </el-table-column>
      <el-table-column
        prop="college.name"
        label="学院分类"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="img"
        label="图片地址"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column prop="type" label="类型" min-width="100" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.type === 'DETAILS'">详情页</span>
          <span v-if="scope.row.type === 'COURSE'">橱窗课程(限PC端)</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="bannerType"
        label="banner类型"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.bannerType === 'INTEGRAL'">积分</span>
          <span v-if="scope.row.bannerType === 'HOMEPAGE'">首页(限PC端)</span>
          <span v-else>-</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="course.title"
        label="课程名称"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="link"
        label="跳转链接"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="ordered"
        label="显示顺序"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="status"
        label="状态"
        min-width="100"
        align="center"
      >
        <template slot-scope="scope">
          <span v-if="scope.row.status === 'PUBLISHED'">已发布</span>
          <span v-else-if="scope.row.status === 'CLOSE'">已关闭</span>
          <span v-else>未发布</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="createdDate"
        label="添加时间"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="browsingCount"
        label="阅读量"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="praiseCount"
        label="点赞量"
        min-width="100"
        align="center"
      >
      </el-table-column>
      <el-table-column label="操作" min-width="100" align="center">
        <template slot-scope="scope">
          <el-dropdown split-button type="success">
            <span @click="handleClick('edit', scope.row)">编辑</span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-if="
                  scope.row.status === 'UNRELEASED' ||
                    scope.row.status === 'CLOSE'
                "
                ><el-button
                  type="text"
                  @click="handleMenuClick('pub', scope.row)"
                  >发布</el-button
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><el-button
                  v-if="scope.row.status === 'PUBLISHED'"
                  plain
                  type="text"
                  @click="handleMenuClick('close', scope.row)"
                  >关闭</el-button
                ></el-dropdown-item
              >
              <el-dropdown-item
                ><el-button
                  type="text"
                  @click="handleMenuClick('del', scope.row)"
                  >删除</el-button
                ></el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
    <!-- 添加\编辑学院弹窗 -->
    <handle-dialog
      v-if="handleDialogData.isShow"
      :handle-dialog-data="handleDialogData"
      @refreshList="refreshList"
    ></handle-dialog>
  </div>
</template>
<script>
import { filterImageMixins } from '@/mixins/filterImage'
import { saveScrollMixins } from '@/mixins/saveScroll'
import {
  getTopGraphList,
  appendReleaseTopGraph,
  appendCloseTopGraph,
  deleteTopGraph
} from '@/api/classifyManage/topDiagram'
import topSearch from '@component/topDiagram/topSearch' // 上部搜索条件
import handleDialog from '@component/topDiagram/handleDialog'

export default {
  name: 'topDiagram',
  msg: '移动端顶部头图管理',
  mixins: [filterImageMixins, saveScrollMixins],
  components: {
    handleDialog,
    topSearch
  },
  data() {
    return {
      tableData: [],
      total: 0,
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      handleDialogData: {
        isShow: false,
        params: '',
        type: ''
      },
      id: '',
      exportData: [],
      formInline: {
        id: '',
        name: ''
      }
    }
  },
  mounted() {},
  methods: {
    handleMenuClick(type, row) {
      if (type === 'pub') {
        this.$confirm('是否要发布？', '发布提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        })
          .then(() => {
            appendReleaseTopGraph(
              row.id,
              (response) => {
                this.$message({
                  message: '发布成功',
                  type: 'success'
                })
                this.toSearch()
              },
              (response) => {
                this.$message.error(response.message)
              }
            )
          })
          .catch(() => {})
      } else if (type === 'close') {
        this.$confirm('是否要关闭？', '关闭提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        })
          .then(() => {
            appendCloseTopGraph(
              row.id,
              (response) => {
                this.$message({
                  message: '关闭成功',
                  type: 'success'
                })
                this.toSearch()
              },
              (response) => {
                this.$message.error(response.message)
              }
            )
          })
          .catch(() => {})
      } else if (type === 'del') {
        this.$confirm('您确认要删除吗？', '删除提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'danger'
        })
          .then(() => {
            deleteTopGraph(
              row.id,
              (response) => {
                this.toSearch()
              },
              (response) => {
                this.$message.error(response.message)
              }
            )
          })
          .catch(() => {})
      }
    },
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 获取列表 */
    searchList() {
      let params = { ...this.searchParams, ...this.formInline }
      getTopGraphList(
        params,
        (response) => {
          this.total = response.total
          this.tableData = response.rows
        },
        (response) => {
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 编辑头图/新增头图
    handleClick(type, row) {
      this.handleDialogData.isShow = true
      this.handleDialogData.params = row
      this.handleDialogData.type = type
    },
    refreshList() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>
<style lang="less">
#topDiagram {
  .img-box {
    position: relative;
    display: inline-block;
    width: 60px;
    height: 60px;
    border: 1px solid #ddd;

    .img-inner-box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100%;
      text-align: center;

      .el-image {
        width: 100%;
        height: 100%;
      }

      img {
        max-width: 100%;
        max-height: 100%;
        cursor: pointer;
      }
    }

    .num {
      position: absolute;
      display: block;
      bottom: 0;
      right: 0;
      width: 16px;
      height: 16px;
      background: rgba(0, 0, 0, 0.7);
      color: #fff;
      font-size: 12px;
      text-align: center;
      line-height: 16px;
    }
  }
}
</style>
